<template>
	<view class="container">
		<u-navbar :autoBack="true" :title="data.title" leftIconColor="#fff" bgColor="#0a0816" placeholder>
			<template slot="right">
				<text @click="hanldeActivityRecord" class="font-24 color-theme">活动记录</text>
			</template>
		</u-navbar>

		<view class="pad-32">
			<view class="banner">
				<image class="cover radius24" :src="data.cover" mode=""></image>
				<view class="centerXY rule_btn" @click="hanldeRule">
					<text>活动规则</text>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
			</view>

			<view class="bg-theme1 radius16 pad-24 mar-top-32">
				<view class="font-32 my-font color-white">选择合成方式</view>
				<view class="list-box">
					<view class="list centerY mar-top-24 pad-16" @click="hanldeActivity(item)"
						v-for="(item,index) in channelList" :key="item.id">

						<!-- 状态 -->
						<template v-if="item.status == 2">
							<view class="status bg-hui font-24">活动未开启</view>
						</template>
						<template v-else>
							<!-- 优先合成未开始 -->
							<template v-if="item.first_at > 0">
								<view class="status bg-theme1 centerXY font-24" v-if="newTime < item.first_at">
									<u-count-down @finish="hanldeFinish(index)" :time="countDown(item.first_at,newTime)"
										format="HH:mm:ss"></u-count-down>
									<text class="mar-left-10 color-theme">开始</text>
								</view>
								<!-- 活动进行中 -->
								<view class="status bg-theme centerXY font-24"
									v-if="newTime >= item.first_at && newTime < item.end_at">
									<text>火热进行中</text>
								</view>
								<!-- 活动也结束 -->
								<view class="bg-hui centerXY font-24" v-if="item.end_at < newTime">
									<image class="sale-icon" src="../../static/icon/sale-done.png"></image>
									<text class="mar-left-5">活动已结束</text>
								</view>
							</template>
							<template v-else>
								<!-- 活动未开始 -->
								<view class="status bg-theme1 centerXY font-24" v-if="newTime < item.begin_at">
									<u-count-down @finish="hanldeFinish(index)" :time="countDown(item.begin_at,newTime)"
										format="HH:mm:ss"></u-count-down>
									<text class="mar-left-10 color-theme">开始</text>
								</view>
								<!-- 活动进行中 -->
								<view class="status bg-theme centerXY font-24"
									v-if="newTime > item.begin_at && item.end_at > newTime">
									<text>火热进行中</text>
								</view>
								<!-- 活动也结束 -->
								<view class="status bg-hui centerXY font-24" v-if="item.end_at < newTime">
									<image class="sale-icon" src="../../static/icon/sale-done.png"></image>
									<text>活动已结束</text>
								</view>
							</template>
						</template>

						<image class="cover radius8" :src="item.cover" mode=""></image>
						<view class="flex-w mar-left-20">
							<view class="font-28 color-white">{{item.title}}</view>
							<view class=" mar-top-16 font-24">活动时间:
								{{$u.timeFormat(item.begin_at, 'mm-dd hh:MM')}} ~
								{{$u.timeFormat(item.end_at, 'mm-dd hh:MM')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		activityInfo
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 活动详情
				data: {},
				// 活动列表
				channelList: [],
				// 当前时间
				newTime: parseInt(new Date().getTime() / 1000),
			}
		},
		onLoad(options) {
			this.activityId = options.id;
			this.getActivity();
		},
		methods: {
			// 跳转去详情
			hanldeActivity(item) {
				if (item.join_now) {
					if (item.type == 'draw') {
						uni.navigateTo({
							url: '/pages/activity/lottery?id=' + item.id
						})
					} else {
						uni.navigateTo({
							url: '/pages/activity/activity?id=' + item.id
						})
					}
				}
			},
			// 跳转去活动记录
			hanldeActivityRecord() {
				uni.navigateTo({
					url: '/pages/my/activityRecord?id=' + this.activityId +'&type='+ 'compose'
				})
			},
			// 刷新当前时间
			hanldeFinish(index) {
				this.channelList[index].join_now = true;
				this.newTime = parseInt(new Date().getTime() / 1000);
			},
			// 倒计时计算 time - time1 *1000
			countDown(time, time1) {
				return (time - time1) * 1000;
			},
			// 跳转规则
			hanldeRule() {
				uni.navigateTo({
					url: '/pages/activity/rules?id=' + this.activityId
				})
			},
			// 获取详情
			getActivity() {
				activityInfo({
					id: this.activityId
				}).then(res => {
					let {
						info,
						channel
					} = res.data;
					this.data = info;
					this.channelList = channel;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		.sale-icon {
			width: 32rpx;
			height: 32rpx;
		}

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.banner {
			position: relative;

			.cover {
				width: 100%;
				height: 688rpx;
			}

			.rule_btn {
				width: 154rpx;
				height: 70rpx;
				border-radius: 50rpx 0 0 50rpx;
				border-top: 1rpx solid $uni-theme;
				border-bottom: 1rpx solid $uni-theme;
				border-left: 1rpx solid $uni-theme;
				position: absolute;
				right: 0rpx;
				top: 34rpx;
				background: white;
				font-size: 24rpx;
			}
		}

		.list-box {
			.list {
				background: linear-gradient(226deg, #f4f7fe, hsla(0, 0%, 100%, 0));
				border: 2rpx solid #ebebeb;
				border-radius: 16rpx;
				position: relative;


				::v-deep .u-count-down__text {
					width: 110rpx;
					text-align: right;
					font-size: 24rpx;
					color: white;
				}

				.bg-theme1 {
					::v-deep .u-count-down__text {
						width: 110rpx;
						text-align: right;
						font-size: 24rpx;
						color: $uni-theme !important;
					}
				}

				.status {
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					color: white;
					border-radius: 0 16rpx 0 16rpx;
					padding: 0 16rpx;
					line-height: 44rpx;
				}

				.bg-hui {
					background: rgba(0, 0, 0, .2);
				}

				.cover {
					width: 156rpx;
					height: 156rpx;
				}
			}
		}
	}
</style>